<template>
	<view class="member page bgf5">
		<!--  :style="{backgroundImage: 'url(' + bgImg + ')'}" -->
		<view class="head">
			<view class="flex flexC pt100 px13 pl16">
				<button class="btn" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<image class="avatar r50" :src="avatar" mode="aspectFill"></image>
				</button>
				<view class="ml12">
					<view @click="login" class="fs18 bold6 c33">{{username}}</view>
					<view>
						<button open-type="getPhoneNumber" @getphonenumber="getPhone" class="c66">{{mobile}}</button>
					</view>
				</view>
			</view>
		</view>
		<view class="wattle pt20 r12 mx15 boxS r16">
			<!-- <image class="bgImg r16" src="/static/img/bg/bghead.png" mode="aspectFill"></image> -->
			<!-- <image class="bgImg r16" src="/static/img/bg/bg_card.png" mode="aspectFill"></image> -->
			<view class="flex flexC flexBox fs13">
				<view class="flex1 flex flexC flexCol leftbox">
					<view>账户余额</view>
					<view class="mt4 fs20 bold6">{{balance}}</view>
					<view class="r40 bgff bts mt10 fs11 px10 py5" @click="clickSend">转赠好友</view>
				</view>
				<view class="flex1 flex flexC flexCol">
					<view class="">特惠团购券</view>
					<view class="mt4">限时抢</view>
					<view class="r40 bgff bts mt20 fs11 px10 py5" @click="goTuan">立即抢购</view>
				</view>
			</view>
			
		</view>
		<view class="px15 py10 mt10 box">
			<view class="fs15 flex flexC">
				<text class="bold6 flex1">我的优惠</text>
				<!-- <view class="c85 fs12">
					<text>查看全部</text>
					<text class="arrowR dinline"></text>
				</view> -->
			</view>
			<view class="flex flexC mt10 c33">
				<view @click="clickTuan" class="flex1 bgff flex flexC mr10 bg py14 r5 px16">
					<view class="flex1">
						<view class="fs15">团购券</view>
						<view class="fs13 mt5 cf95">{{tuan}} 张</view>
					</view>
					<image class="iconImg" src="/static/img/icon/tg_icon.png" mode="aspectFill"></image>
				</view>
				
				<view @click="clickComment" class="flex1 bgff flex flexC mr10 bg py14 r5 px16">
					<view class="flex1">
						<view class="fs15">好评券</view>
						<view class="fs13 mt5 cf95">{{comment}} 张</view>
					</view>
					<image class="iconImg" src="/static/img/icon/tg_icon.png" mode="aspectFill"></image>
				</view>
				<view class="flex1 bgff flex flexC bg py14 r5 px16" @click="clickYou">
					<view class="flex1">
						<view class="fs15">优惠券</view>
						<view class="fs13 mt5 c66">{{coupon}} 张</view>
					</view>
					<image class="iconImg" src="/static/img/icon/coupon_icon.png" mode="aspectFill"></image>
				</view>
				
				
			</view>
		</view>
<!-- 		<view class="bgff r5 py10  mx15 boxbtn c33" @click="clickAssistAnt">
			<view class="fs15 px15">
				<text class="bold6">助教订单</text>
			</view>
			<view class="flex flexC flexW aliC mt18 fs12">
				<view class="w-5 mb12 item">
					<image src="/static/img/icon/jd_icon.png" mode="aspectFill"></image>
					<text v-if="false" class="num">10</text>
					<view>待接单</view>
				</view>
				<view class="w-5 mb12 item">
					<image src="/static/img/icon/xf_icon.png" mode="aspectFill"></image>
					<text v-if="false" class="num">5</text>
					<view>待消费</view>
				</view>
				<view class="w-5 mb12 item">
					<image src="/static/img/icon/xfz_icon.png" mode="aspectFill"></image>
					<text v-if="false" class="num">10</text>
					<view>消费中</view>
				</view>
				<navigator url="/pages/member/join" class="w-5 mb12 item" hover-class="none">
					<image src="/static/img/icon/done_icon.png" mode="aspectFill"></image>
					<text v-if="false" class="num">2</text>
					<view>已完成</view>
				</navigator>
			</view>
		</view> -->
		<view class="bgff r5 py10 mt12 mx15 box c33">
			<view class="fs15 px15">
				<text class="bold6">我的工具</text>
			</view>
			<view class="flex flexC flexW aliC mt18 fs12">
				<view class="w-5 mb12" @click="content_wf">
					<image src="/static/img/icon/wifi_icon.png" mode="aspectFill"></image>
					<view>WiFi连接</view>
				</view>
				<view class="w-5 mb12" @click="clickFav">
					<image src="/static/img/icon/sc_icon.png" mode="aspectFill"></image>
					<view>收藏店铺</view>
				</view>
				<view class="w-5 mb12" @click="$refs.kfPop.open()">
					<image src="/static/img/icon/kf_icon.png" mode="aspectFill"></image>
					<view>联系客服</view>
				</view>
				<navigator url="/other/join/join" class="w-5 mb12" hover-class="none">
					<image src="/static/img/icon/open_icon.png" mode="aspectFill"></image>
					<view>我要开店</view>
				</navigator>
				<view class="w-5 mb12" @click="faq">
					<image src="/static/img/icon/que_icon.png" mode="aspectFill"></image>
					<view>常见问题</view>
				</view>
			</view>
		</view>
		<uni-popup ref="kfPop" type="bottom">
			<view class="popup-content2">

				<button open-type="contact" class="popup-btn fs13">在线客服</button>
				<!-- <view open-type="contact" class="popup-btn fs13">在线客服</view> -->
				
				<view class="popup-btn fs12" @click="call">电话客服</view>

				<view class="popup-btn fs12" @click="$refs.kfPop.close()">取消</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: 'https://qhy2023.oss-cn-hangzhou.aliyuncs.com/uploads/20230419/7576623e875153f10308bebe4d0b9f91.png',
				bgImg2: 'https://qhy2023.oss-cn-hangzhou.aliyuncs.com/uploads/20231106/8af11dc16727068cdb22e8a03973341f.png',
				bgImg3: 'https://qhy2023.oss-cn-hangzhou.aliyuncs.com/uploads/20231106/8af11dc16727068cdb22e8a03973341f.png',
				username: '',
				avatar: '',
				mobile: '点击注册',
				code: '',
				avatarPath: '',
				tel: '4008885626',
				balance: 0,
				tuan: 0,
				shop_id: '',
				bssid: '',
				wifi_info: null,
				platform: '',
				coupon: 0,
				comment:0,
			};
		},
		onLoad() {

			this.username = uni.getStorageSync("username");
			this.mobile = uni.getStorageSync("mobile");
			this.avatar = uni.getStorageSync("avatar");

			if (this.mobile == "") {

				this.mobile = "获取手机号";
			}

			if (this.avatar == "") {
				this.avatar = "/static/logo.jpg"
			}
			this.init();

		},

		onShow() {
			var token = uni.getStorageSync("token");
			if (token != "") {
				this.getInfo();
			} else {
				this.username = "登录";
				this.mobile = "";
			}
		},

		onTabItemTap: function(e) {
			console.log(e);
			uni.vibrateShort({
				success: function() {
					console.log('success');
				}
			});
		},
		methods: {
			clickComment(){
				uni.navigateTo({
					url:'../member/commentList'
				})
			},
			
			clickAssistAnt(){
				uni.navigateTo({
					url:'../assistant/list'
				})
			},	

			login() {
				var token = uni.getStorageSync("token");
				if (token == "") {
					uni.navigateTo({
						url: '../member/login'
					})
				}

			},

			call() {
				this.$refs.kfPop.close();
				uni.makePhoneCall({
					phoneNumber: "4008885626"
				})
			},

			clickFav() {
				uni.navigateTo({
					url: '../home/fav'
				})
			},

			clickSend() {
				uni.navigateTo({
					url: '../member/sendMoney'
				})
			},

			clickTuan() {
				uni.navigateTo({
					url: '../member/userTuan'
				})
			},

			clickYou() {
				uni.navigateTo({
					url: '../member/couponList'
				})
			},


			wifiConnect() {
				this.$refs.popup3.close();
				let that = this;
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

						var url = res.result;
						var index = url.lastIndexOf("\/");
						var result = url.substring(index + 1, url.length);
						that.shop_id = result.split("-")[0];
						that.getWifi();
					}
				})
			},
			getWifi() {
				let that = this;

				let param = {
					shop_id: this.shop_id
				};

				this.$api.getWifiInfo(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.wifi_info = res.data;
						that.content_wf();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},

			content_wf() {
				// 获取手机型号
				uni.showToast({
					icon: 'none',
					title: "正在连接中"
				})
				let that = this
				uni.getSystemInfo({
					success: (res) => {
						let system = ''
						// console.log("当前手机型号===>",res)
						that.platform = res.platform;
						if (res.platform == 'android') {
							system = parseInt(res.platform.substr(8))
						}
						if (res.platform == 'ios') {
							system = parseInt(res.platform.substr(4))
						}
						if (res.platform == 'android' && system < 6) {
							uni.showToast({
								title: '手机版本不支持',
								icon: 'none'
							})
							return
						}
						if (res.platform == 'ios' && system < 11.2) {
							uni.showToast({
								title: '手机版本不支持',
								icon: 'none'
							})
							return
						}
						//初始wifi模块
						that.start_wifi()
					}
				})
			},

			start_wifi() {
				let that = this
				uni.startWifi({
					success: (res) => {
						console.log("startWifi==>", res)

						if (that.platform == 'android') {

							console.info("===getWifiList=====");
							uni.getWifiList({
								success: (res) => {
									uni.onGetWifiList(function(res2) {

										console.info('+++onGetWifiList++++' + JSON
											.stringify(res2))

										var isFind = false;
										for (var i = 0; i < res2.wifiList.length; i++) {
											if (res2.wifiList[i]['SSID'] == "QUEXIA") {
												var bssid = res2.wifiList[i]['BSSID'];
												that.bssid = bssid;
												isFind = true;
												console.info("====bssid====" + bssid);
												that.connected();
											}
										}

										if (isFind == false) {

											uni.showToast({
												title: "附近没找QUEXIA名字的WIFI",
												icon: 'none'
											})
											return;
										}
									})
								},
								fail: function(res) {
									that.connected();
									console.info("====getWifiList error======" + JSON.stringify(
										res))
								}
							})
						} else {
							that.connected()
						}

					},
					fail: (error) => {
						console.log(error)
						uni.showToast({
							title: '连接失败',
							icon: 'none'
						})
					}
				})
			},

			connected() {

				let that = this
				uni.connectWifi({
					SSID: "QUEXIA", //Wi-Fi 设备名称,
					password: "4008885626", //Wi-Fi 密码，
					BSSID: that.bssid,
					success: (res) => {
						that.msg = "连接成功"
						uni.showToast({
							title: "连接成功"
						})
					},
					fail: (error) => {
						uni.showToast({
							title: '连接失败',
							icon: 'none'
						})
					}
				})
			},


			wifi() {
				this.$refs.popup3.open();
			},

			goTuan() {
				uni.setStorageSync("tabIndex", 1);
				uni.switchTab({
					url: '../discount/index'
				})
			},

			charge() {
				uni.switchTab({
					url: '../discount/index'
				})
			},

			getInfo() {
				let that = this;

				let param = {
					orgId: uni.getStorageSync("orgId")

				};

				this.$api.info(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.balance = res.data.balance;
						that.tuan = res.data.tuan;
						that.coupon = res.data.coupon;
						that.username = res.data.username;
						that.mobile = res.data.mobile;
						that.comment = res.data.comment;
						uni.setStorageSync("tel", that.tel);
					} else {

					}
				})
			},

			onChooseavatar(e) {
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				uni.showLoading({
					title: '加载中'
				});
				uni.uploadFile({
					url: this.$uploadUrl,
					filePath: avatarUrl,
					name: 'file',

					success: uploadFileRes => {
						// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
						let data = JSON.parse(uploadFileRes.data);
						if (data.code === 1) {
							this.avatar = data.data.fullurl;
							this.avatarPath = data.data.url;
							this.updateUserInfo();
							console.info("===data=" + data.data.url)
						}
					},
					fail: (error) => {
						uni.showToast({
							title: error,
							duration: 2000
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},

			updateUserInfo() {
				let param = {
					avatar: this.avatarPath
				}

				let that = this;
				this.$api.updateUser(param).then(res => {

					if (res.code == 1) {
						uni.setStorageSync("avatar", that.avatar);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});

					}
					console.info(res);
				})
			},
			
			getPhone(e) {

				console.info(JSON.stringify(e));
				var phoneData = e.detail.encryptedData;
				var phoneIv = e.detail.iv;
				var codeMsg = e.detail.errMsg;

				let param = {
					phoneData: phoneData,
					phoneIv: phoneIv,
					code: this.code,
					orgId: 27
				}

				let that = this;
				this.$api.updatePhone(param).then(res => {

					if (res.code == 1) {
						uni.setStorageSync("mobile", res.data);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						that.init();
					}
					console.info(res);
				})
			},

			init() {

				let _this = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						let provider = res.provider;
						_this.provider = provider;
						uni.setStorageSync("provider", provider)
					},
					fail: function(res) {

					}
				});
				uni.login({
					provider: uni.getStorageSync("provider"),
					success: function(loginRes) {
						console.info(loginRes);
						let code = loginRes.code;
						_this.code = code;


					},
					fail: function(res) {
						console.info(res);
					}
				})
			},

			faq() {
				uni.navigateTo({
					url: '../member/faq'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member {
		.boxbtn {
			image {
				width: 48rpx;
				height: 48rpx;
			}
			.item {
				position: relative;
				.num {
					position: absolute;
					top: -8rpx;
					margin-left: -10rpx;
					background-color: #F83636;
					color: #fff;
					padding: 0 10rpx;
					line-height: 24rpx;
					font-size: 20rpx;
					border: 2rpx solid #fff;
					border-radius: 40rpx 40rpx 40rpx 0;
				}
			}
		}
		.cf95 {
			color: #F95C28;
		}
		.iconImg {
			width: 108rpx;
			height: 108rpx;
		}
		.wattle {
			position: relative;
			margin-top: -50rpx;
			height: 250rpx;
			color: #260000;
			font-weight: bold;
			background-color: #F8D04A;
			.bgImg {
				position: absolute;
				z-index: 0;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.flexBox {
				position: relative;
				z-index: 10;
				.leftbox {
					border-right: 2rpx solid #F8D04A;
				}
			}
		}
		.bb {
			margin: 0rpx;
			padding-left: 30rpx;

		}

		.head {
			position: relative;
			padding-bottom: 60rpx;
			width: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background: linear-gradient(to bottom, #FAD427, #F7F3E2);
			
			.pt100 {
				padding-top: 130rpx;
			}

			.btn {
				margin: 0px;
			}

			.avatar {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #fff;
				box-sizing: border-box;
			}

			.bg34 {
				background: linear-gradient(to bottom, #7B7B7B, #3A3A3A, #3A3A3A);

				.bgb5 {
					background-color: #B5B5B5;
					border-radius: 0 80rpx 80rpx 0;
				}
			}
		}

		.box {
			position: relative;

			image {
				width: 54rpx;
				height: 54rpx;
			}
		}

		button {

			background: none;
			font-size: 10pt;
			padding-left: 0rpx;
		}

		button::after {
			border: none;

		}

		.bg {
			width: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
	}


	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 13pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>